import { useDispatch, useSelector } from "react-redux";
import { Table, Space, Form, Input, Button, Checkbox, Select } from "antd";
import { useNavigate } from "react-router";


export function ArticlePage() {
    const article = useSelector(state => state.article)
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const [form] = Form.useForm();



    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name'
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '地址',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '标签',
            key: 'tags',
            dataIndex: 'tags'
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="small">
                    <a>浏览</a>
                    <a onClick={()=>toEditPage(record.name)}>编辑</a>
                </Space>
            ),
        },
    ];

    let toEditPage = (id) => {
        id ?navigate(`/article/${id}`): navigate('/article')
    }

    return (
        <div className={"articleList"}>
            <Form form={form} style={{ maxWidth: 'none' }} layout="inline">
                <Form.Item label="关键词">
                    <Input placeholder="input placeholder" />
                </Form.Item>
                <Form.Item label="类型">
                    <Select defaultValue="lucy" options={article.category} style={{ width: 120 }}></Select>
                </Form.Item>

                <Form.Item label="置顶">
                    <Input placeholder="input placeholder" />
                </Form.Item>

                <Form.Item label="">
                    <Checkbox> 仅显示草稿 </Checkbox>
                </Form.Item>

                <Form.Item>
                    <Space>
                        <Button type="primary">搜索</Button>
                        <Button type="default" htmlType="button" onClick={()=>toEditPage()}>新建</Button>
                    </Space>
                </Form.Item>
            </Form>
            <Table size='small' columns={columns} dataSource={article.records} style={{ marginTop: 10 }}></Table>
        </div>
    )


}